<template>
  <div class="mine">
    <div class="mine_brand">
      <brand :items="$store.state.brandCumb"></brand>
    </div>
    <div class="mine_main">
      <div class="mine_main_panal">
        <div class="main_panal_part">
          <div class="panal_part_header">
            <el-avatar :size="120" :src="info.headimgurl || '/headimg.jfif'"></el-avatar>
          </div>
          <div class="panal_part_config">
            <span>{{ info.nickname }}</span>
            <el-button
              @click="editavatar = true"
              class="part_config_button"
              type="primary"
              plain
              >修改头像</el-button
            >
          </div>

          <div class="panal_part_info">
            <p>
              手机: <span>{{ info.phone || "无" }}</span>
            </p>
          </div>
          <el-button disabled type="danger">修改密码</el-button>
        </div>

        <div class="main_panal_base">
          <el-form label-width="80px">
            <el-form-item label="用户名:">
              <span>{{ info.username || "无" }}</span>
            </el-form-item>
            <el-form-item label="角色:">
              <span>{{ info.roleName || "无" }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <el-input disabled :value="info.city || '无'"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input disabled :value="info.sex || '无'"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="editavatar" width="27%">
      <el-upload
        action="/api/users/uploadAvatar"
        list-type="picture-card"
        :limit="1"
        :headers="headers"
        ref="avatarUpload"
        :on-success="_avatarseccus"
        :on-remove="_handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="_editavatarcancel">取 消</el-button>
        <el-button type="primary" :disabled="!avatar" @click="_editavatarsubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import brand from "components/Brand";
import { getLog } from "api/interface";
export default {
  components: {
    brand,
  },
  data() {
    return {
      info: {},
      editavatar: false,
      headers: {},
      avatar: "",
    };
  },
  mounted() {
    // getLog()
    const info = this.$store.state.info;
    const token = this.$save.takeOut("TOKKU");
    this.info = info;

    this.headers["authorization"] = token;
  },
  methods: {
    _handleRemove() {},
    _avatarseccus(n) {
      const information = {
        message: n.msg,
        type: n.status == "1" ? "suceess" : "error",
        duration: 1800,
      };
      if (n.status == 1) {
        this.avatar = n.headimgurl;
      }
      this.$message(information);
    },
    _editavatarcancel() {
      this.editavatar = false;
      this.avatar = "";
      this.$refs.avatarUpload.clearFiles();
    },
    _editavatarsubmit() {},
  },
};
</script>

<style scoped>
.mine {
  height: 100%;
}
.mine_main {
  height: 100%;
  position: relative;
}
.mine_main_panal {
  height: 400px;
  width: 600px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  border-radius: 5px;
  display: flex;
  box-shadow: 0 0 15px #ccc;
}
.main_panal_part {
  flex: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 10px;
}
.panal_part_config {
  display: flex;
  flex-direction: column;
  flex: 4;
  justify-content: center;
  align-items: center;
  line-height: 40px;
}
.part_config_button {
  width: 150px;
}
.panal_part_info {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main_panal_base {
  flex: 6;
  padding: 15px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
>>> .el-form-item__content {
  text-align: left;
  padding-left: 15px;
}
</style>
